<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
    <style>
      div {
        border: 2px solid deepskyblue;
        border-radius: 3px;
      }
      .container {
        display: flex; /*弹性布局*/
        flex-direction: row; /*弹性布局的主轴方向 row表示横向*/
        height: 300px;/*弹性布局设置了父容器的高度 子项目的高度会自动变成父容器的高度*/
        width: 500px;
        gap: 20px; /*子项目的左右间隙是20*/
        justify-content: center;/*子项目居中对齐*/
      }
      .item {
        flex-basis: 50px;/*设置子项目的宽度*/
      }
    </style>
</head>
<body>
  <div class="container">
    <div class="item">Hello</div>
    <div class="item">to</div>
    <div class="item">the</div>
    <div class="item">world</div>
  </div>
</body>
</html>